<template lang="html">
  <div class="boutiquedetails">
    <Header :HeaderTitle="header_title"></Header>
     <!-- 轮播图 -->
    <carousel v-bind:listshuju="lunbotu_list"></carousel>
    <Details :detailsimg="goods" v-on:listenToChildEvent="showMsgFromChild"></Details>
    <ul class="purchase_box">
      <li class="purchase_main">需支付：{{zongjianum}}</li>
      <li class="purchase_at">
        <a @click="del()">立即购买</a>
      </li>
    </ul>
    <confirm v-bind:confirmModalOptions="confirmOptions" ref="myConfirm"></confirm>
  </div>
</template>
<script type="text/javascript">
  import confirm from "../../alert/confirm.vue";
  import Header from "../header/header.vue";
  import carousel from "../Carousel/Carousel.vue";
  import details from "../goodsdetails/name.vue";
  export default {
    name: 'cuxiao',
    data(){
      return{
        header_title:{url:"/",title:"商品详情"},
        goods:{},
        confirmOptions:{},
        lunbotu_list:[],
        goodsid:"",
        num:1,
        zongjianum:0
      }
    },
    methods:{
      showMsgFromChild:function(data){
        this.num = data;
        this.zongjianum=parseInt(this.goods.freight)+parseInt(this.goods.price)*this.num;
      },
      del: function () {
        let seft=this; 
        seft.$refs.myConfirm.showModel();
        seft.confirmOptions= {
          title: "下单",//提示
          title_right: "",//提示
          message: '您升级的是鸡，确认下单么？',
          btnSubmitText: "升级",//确定
          btnCancelText: "提货",//取消
          btnSubmitFunction: function () {
            seft.$router.push({path: '/cuxiaodetermine',query:{id:seft.goodsid,numer:seft.num}});
          },
          btnCancelFunction: function () {
            seft.$router.push({path: '/orderform',query:{id:seft.goodsid,numer:seft.num}});
          }
        }
      }
    },
    created:function () {
      let routerParams = this.$route.query.id,
      conent = this,
      _url = "/index.php?g=app&m=shopping&a=goods_one_post",
      _data={
        id:routerParams
      }
      conent.$http.post(_url,_data).then(function(data){
        if(data.data.status== "1"){
          conent.goods =data.data.data.goods_info;
          conent.goodsid = data.data.data.goods_info.id;
          conent.lunbotu_list =data.data.data.goods_info.img_list.split(",");
          conent.zongjianum=parseInt(data.data.data.goods_info.freight)+parseInt(data.data.data.goods_info.price);
        }else {
          
        }
      },function(response){
          conent.$toast(response);
      })
    },
    components:{
      'Header':Header,
      'carousel':carousel,
      'Details':details,
      'confirm':confirm,
    }
  }
</script>

<style scoped lang="less">
@import '../../../assets/less/index.less';
.boutiquedetails{
  .purchase_box{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 13.33vw;
    font-size:@h1_font_size;
    color: @color1;
    li{height: 100%;float: left;line-height: 13.33vw;}
    .purchase_main{
      width: 66.6%;
      background-color: @color6;
    }
    .purchase_at{
      width: 33.33%;
      background-color: @color;
      a{
        color: @color1;
        display: inline-block;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>